// 3...
const compileUtil = {
  getVal (expr, vm) {
    // [msg] -- msg
    // [person,name] -- person.name
    return expr.split('.').reduce((data, currentVal) => {
      // console.log(data, currentVal, data[currentVal]);
      return data[currentVal]
    }, vm.$data)
  },
  setVal (expr, vm, inputVal) {
    return expr.split('.').reduce((data, currentVal) => {
      // console.log(data, currentVal, data[currentVal]);
      data[currentVal] = inputVal
    }, vm.$data)
  },
  getContentVal (expr, vm) {
    return expr.replace(/\{\{\s*(.+?)\s*\}\}/g, (...agrs) => {
      // 去除首尾空格
      return this.getVal(agrs[1], vm)
    })
  },
  text (node,expr,vm) { // expr: msg   {{}}
    let value
    if (expr.indexOf('{{') !== -1) {
      // {{person.name}} -- {{person.age}}
      value = expr.replace(/\{\{\s*(.+?)\s*\}\}/g, (...agrs) => {
        // console.log(agrs[1]);
        // 绑定观察者 将来数据发生变化 触发这里的回调 进行更新
        new Watcher(vm, agrs[1], (newVal) => {
          this.updater.textUpdater(node, this.getContentVal(expr, vm))
        })
        // 去除首尾空格
        return this.getVal(agrs[1], vm)
      })
    } else {
      value = this.getVal(expr,vm) // 取到对应值
    }
    this.updater.textUpdater(node, value)
  },
  html (node,expr,vm) {
    const value = this.getVal(expr, vm)
    new Watcher(vm, expr, (newVal) => {
      this.updater.htmlUpdater(node, newVal)
    })
    this.updater.htmlUpdater(node, value)
  },
  model (node,expr,vm) {
    const value = this.getVal(expr, vm)

    // 双向数据绑定
    // 数据驱动视图
    new Watcher(vm, expr, (newVal) => {
      this.updater.modelUpdater(node, newVal)
    })

    // 视图驱动数据
    node.addEventListener('input', e => {
      this.setVal(expr, vm, e.target.value)
    })
    this.updater.modelUpdater(node, value)
  },
  on (node,expr,vm,eventName) {
    let fn = vm.$options.methods && vm.$options.methods[expr]
    node.addEventListener(eventName, fn.bind(vm), false)
  },
  // 更新的函数
  updater: {
    modelUpdater (node, value) {
      node.value = value
    },
    htmlUpdater (node, value) {
      node.innerHTML = value
    },
    textUpdater (node, value) {
      node.textContent = value
    }
  }
}
// 2...
class Complie {
  constructor (el,vm) {
    // 挂载el
    this.el = this.isElementNode(el) ? el : document.querySelector(el)
    this.vm = vm
    // 1.获取文档碎片对象，放入内存中减少页面的回流和重绘
    const fragment = this.node2Fragment(this.el)
    // 2.编译模板
    this.complie(fragment)
    // 3.追加子元素到根元素
    this.el.appendChild(fragment)
  }
  // 判断是否为元素节点
  // 如果节点是元素节点，则 nodeType 属性将返回 1。
  // 如果节点是属性节点，则 nodeType 属性将返回 2。
  isElementNode (node) {
    return node.nodeType === 1
  }
  node2Fragment (el) {
    // 创建文档碎片
    const f = document.createDocumentFragment()
    let firstChild
    while (firstChild = el.firstChild) {
      f.appendChild(firstChild)
    }
    return f
  }
  complie (fragment) {
    // 1.获取子节点
    const childNodes = fragment.childNodes
    childNodes.forEach(child => {
      if (this.isElementNode(child)) {
        // 是元素节点 编译元素节点
        this.complieElement(child)
      } else {
        // 文本节点
        this.complieText(child)
      }
      if (child.childNodes && child.childNodes.length) {
        this.complie(child)
      }
    })
  }
  complieElement (node) {
    // 编译元素
    // <div v-text=msg></div>
    // 元素属性 v-text=msg type=text...
    const attributes = [...node.attributes]
    attributes.forEach(attr => {
      const { name, value } = attr
      if (this.isDirective(name)) {
        // 判断是否为自定义指令 v- 开头 v-on:click..
        const [, dirctive] = name.split('-') // text,html,model,on:click
        const [dirName, eventName] = dirctive.split(':') // text,html,model,on
        // 更新数据     数据驱动视图
        compileUtil[dirName](node, value, this.vm, eventName) // 指向3...

        // 删除有指令标签上的属性
        node.removeAttribute('v-' + dirctive)
      } else if (this.isEventName(name)) {
        // @click
        let [,eventName] = name.split('@')
        compileUtil['on'](node, value, this.vm, eventName)
      }
    })
  }
  isEventName (attrName) {
    return attrName.startsWith('@')
  }
  isDirective (attrName) {
    return attrName.startsWith('v-')
  }
  complieText (node) {
    // {{}} 编译文本 
    const content = node.textContent
    if (/\{\{(.+?)\}\}/.test(content)) {
      compileUtil['text'](node, content, this.vm)
    }
  }
}
// 1...
class MVue {
  constructor (options) {
    this.$el = options.el
    this.$data = options.data
    this.$options = options
    if (this.$el ) {
      // 1.实现一个数据观察者
      new Observer(this.$data)
      // 2.实现一个指令解析器
      new Complie(this.$el,this)
      // 实现代理data数据
      this.proxyData(this.$data)
    }
  }
  proxyData (data) {
    for (const key in data) {
      // 第一个参数：要修改的对象
      // 第二个参数：要 修改/添加 的属性
      // 回调函数：get set时的回调
      Object.defineProperty(this,key,{
        get () {
          return data[key]
        },
        set (newVal) {
          return data[key] = newVal
        }
      })
    }
  }
}